<script setup>
import { reactive, ref, watch, computed } from 'vue'
import { addUser, getUserDetailById, editUser } from '@/api/user'
import { message } from 'ant-design-vue'

// 宏命令
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false // 默认值 false
  },
  currentId: {
    type: Number
  }
})

// watch(变量,()=>{})
// watch([变量1，变量2],()=>{})
// watch(()=>{},()=>{})
watch(
  () => props.currentId,
  () => {
    if (props.currentId) {
      getUserDetail(props.currentId)
    }
  }
)

const showTitle = computed(() => (props.currentId ? '编辑部门' : '新增部门'))

// getUserDetail -- 当用户点击单个用户的“编辑”时，子弹窗可以显示父组件的内容
const getUserDetail = async (id) => {
  const { name, age, gender } = await getUserDetailById(id)
  console.log(name)
  formData.name = name
  formData.age = age
  formData.gender = gender
}
defineExpose({
  getUserDetail
}) // 定义子组件向外抛出的内容

// 定义表单数据 -- reactive所产生的数据不能整体复制，否则就会失去响应式
const formData = reactive({
  name: '',
  age: 18,
  gender: 1
})
const formRef = ref(null) // 声名的变量

// 定义验证函数 -- 验证用户年龄
const validator = (_, value) => {
  if (value >= 18) {
    return Promise.resolve()
  }
  return Promise.reject()
}
const emit = defineEmits(['update:showDialog', 'addSuccess', 'clearId'])
const btnCancel = () => {
  formRef.value?.resetFields() // 清空表单
  emit('clearId') // 清空id
  emit('update:showDialog', false) // 通知父组件 将showDialog改成false
}

// 校验通过
const onFinish = async (values) => {
  // console.log(values)
  // 判断有没有props.currentId，以此来区分子弹窗用户信息的新增还是修改
  if (props.currentId) {
    await editUser({ ...formData, id: props.currentId })
    message.success('编辑用户成功')
  } else {
    // values form表格里面的内容
    await addUser(values)
    message.success('新增用户成功')
  }

  emit('addSuccess') // 通知父组件更新
  btnCancel() // 关闭弹层
}

// vue3.3
</script>
<template>
  <a-modal @cancel="btnCancel" :title="showTitle" :open="props.showDialog" :footer="null">
    <a-form ref="formRef" :model="formData" @finish="onFinish" :label-col="{ span: 6 }">
      <a-form-item
        label="用户姓名"
        name="name"
        :rules="[
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 2, max: 4, message: '用户姓名2-4个字符', trigger: 'blur' }
        ]"
      >
        <a-input v-model:value="formData.name" placeholder="请输入用户姓名"></a-input>
      </a-form-item>
      <a-form-item
        label="用户年龄"
        name="age"
        :rules="[{ validator, message: '用户年龄不能低于18岁', trigger: 'blur' }]"
      >
        <a-input-number v-model:value="formData.age"></a-input-number>
      </a-form-item>
      <a-form-item label="用户性别" name="gender">
        <a-radio-group v-model:value="formData.gender">
          <a-radio :value="0">男</a-radio>
          <a-radio :value="1">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item>
        <a-row justify="center">
          <a-space>
            <a-button type="primary" html-type="submit">确定</a-button>
            <a-button @click="btnCancel">取消</a-button>
          </a-space>
        </a-row>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
